﻿{extend name="public:base" /}


{block name="css"}
<link href="/static/laydate/theme/default/laydate.css">
<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css"/>
<link rel="stylesheet" type="text/css" href="__ADMIN__/css/style.css">
<style>
    /* 设置只展示时分，隐藏秒那一列 */
    .laydate-time-list {
        padding-bottom: 0;
        overflow: hidden;
    }

    .laydate-time-list > li {
        width: 50% !important;
    }

    .laydate-time-list > li:last-child {
        display: none;
    }

    .laydate-time-list ol li {
        width: 100% !important;
        padding-left: 0 !important;
        text-align: center !important;
    }
</style>

{/block}

{block name="content"}

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <style>
            .set-font {
                font-size: 24px;
                font-weight: bold;
            }
        </style>

        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title set-font">门店设置</div>
                <div class="ibox-content">
                    <form method="post">
                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">名称</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" name="name" placeholder="请输入名称" value="{$info.name}">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">电话</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" name="mobile" placeholder="请输入电话" value="{$info.mobile}">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">下单满额配送</label>
                                <div class="col-sm-3">
                                    <input type="number" class="form-control" name="full_price_send" placeholder="请输入电话" value="{$info.full_price_send}">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">营业时间段</label>
                                <div class="col-sm-2">
                                    <input placeholder="请选择营业时间段" type="text" class="form-control form-control-lg business_time" readonly>
                                </div>
                                <div class="col-sm-1">
                                    <button type="button" class="btn btn-primary btn-lg add_business_time">添加</button>
                                </div>
                            </div>

                            <!-- 营业时间段展示 -->
                            <div id="business"></div>

                            <input type="hidden" class="business_range_time" name="business_range_time" value="{$info.business_range_time}">

                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">预约用餐时间段</label>
                                <div class="col-sm-2">
                                    <input placeholder="请选择预约用餐时间段" type="text" class="form-control form-control-lg booking_time" readonly>
                                </div>
                                <div class="col-sm-1">
                                    <button type="button" class="btn btn-primary btn-lg add_booking_time">添加</button>
                                </div>
                            </div>

                            <!-- 预约时间段展示 -->
                            <div id="booking"></div>

                            <input type="hidden" class="booking_range_time" name="booking_range_time" value="{$info.booking_range_time}">

                            <div class="hr-line-dashed"></div>
                        </div>

                        <!--<div class="box-item">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">封面图</label>
                                <div class="col-sm-6">
                                    <input type="file" id="img_file" accept="image/*" style="display: none">
                                    <input type="hidden" class="hidden_value" name="img" id="img" value="{$info['img']|default=''}"/>
                                    <div class="btn btn-w-m btn-primary" onclick="uploadImage('img_file', 'img', 'form-uploaded-box-single', false, 1)">原图上传</div>
                                    <div class="btn btn-w-m btn-primary" onclick="openCrop('form-uploaded-box-single', 1)">裁剪上传</div>

                                    <div class="form-uploaded-box" id="form-uploaded-box-single" style="width: 140px">
                                        {if $info.img}
                                        <div class="form-uploaded-img-box">
                                            <img class="form-uploaded-box-img" src="{:getPicture($info.img)}" data-id="{$info.img}">
                                            <i class="form-uploaded-img-preview iconfont icon-yulan" onclick="previewImg(this, 'form-uploaded-img-preview', 'form-uploaded-box-single')"></i>
                                            <i class="form-uploaded-img-del iconfont icon-close" onclick="delImage(this, 'cropper_uploaded_img_ids', 'cropper_uploaded_img_paths', 'form-')"></i>
                                        </div>
                                        {/if}
                                    </div>
                                </div>

                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>-->

                        <!-- 地图开发文档：https://lbs.qq.com/webApi/component/componentGuide/componentPicker -->
                        <div class="box-item">
                            <div class="form-group row layui-form">
                                <label class="col-lg-1 col-form-label">门店定位（请勾选下方列表地址之后再进行提交）</label>
                                <div class="col-lg-10">
                                    <div style="width: 900px;height: 700px">
                                        <iframe id="mapPage" width="100%" height="100%" frameborder=0 src="{$map_url}"></iframe>
                                    </div>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">详细地址</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control address" name="address" placeholder="请输入详细地址" value="{$info.address}">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <input type="hidden" name="id" value="{$info['id']}">
                        <input type="hidden" class="lat" name="lat" value="{$info.lat}">
                        <input type="hidden" class="lng" name="lng" value="{$info.lng}">

                        <div class="form-group row">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button type="button" class="btn btn-w-m btn-primary ajax-post">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="ibox ">
                <div class="ibox-title set-font">打印机设置</div>
                <div class="ibox-content">
                    <form method="post" id="printer-form">
                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">打印机名称</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" name="printer_name" placeholder="请输入打印机名称" value="{$info.printer_name}">
                                </div>
                            </div>
                        </div>
                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">编号（SN）</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" name="printer_sn" placeholder="请查看打印机背面，输入对应编号（SN）" value="{$info.printer_sn}">
                                </div>
                            </div>
                        </div>
                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">密钥（KEY）</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" name="printer_key" placeholder="请查看打印机背面，输入对应密钥（KEY）" value="{$info.printer_key}">
                                </div>
                            </div>
                        </div>

                        <input type="hidden" name="shop_id" value="{$shop_id}">

                        <div class="form-group row">
                            <div class="col-sm-4 col-sm-offset-2">
                                {if $info.printer_sn}
                                <button class="btn btn-w-m btn-danger del-printer" data-sn="{$info.printer_sn}">删除打印机</button>
                                {/if}
                                <button type="button" class="btn btn-w-m btn-primary ajax-post-printer" data-url="{:url('/index/Printer/addPrinter')}">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{include file="public/cropper-img-mask" cropper_uploaded_img_ids="cropper_uploaded_img_ids" cropper_uploaded_img_paths="cropper_uploaded_img_paths" crop_preview_box="crop-preview-box" /}

{include file="public/preview-img-mask" swiper-id="cropper-preview" /}

{/block}

{block name='js'}
<script src="/static/laydate/laydate.js"></script>
<script src="__STATIC__/layui/layui.js"></script>
<script>
    // 时间插件
    laydate.render({
        elem: '.business_time',
        trigger: 'click',
        type: 'time', //设置日期类型
        format: 'HH:mm', //设置日期格式
        range: true, //分割字符
        // min: 'string', //设置最小值
        done: function (value, date) {

        }
    });

    laydate.render({
        elem: '.booking_time',
        trigger: 'click',
        type: 'time', //设置日期类型
        format: 'HH:mm', //设置日期格式
        range: true, //分割字符
        // min: 'string', //设置最小值
        done: function (value, date) {

        }
    });

    /**
     * 判断时间是否出现交叉
     * */
    function isTimeOverlap(time, newTime) {
        let newTimeSplit = newTime.split(" - ").map(time => time.trim());
        for (let i = 0; i < time.length; i++) {
            let timeSplit = time[i].split(" - ").map(time => time.trim());
            if ((newTimeSplit[0] >= timeSplit[0] && newTimeSplit[0] < timeSplit[1]) ||
              (newTimeSplit[1] > timeSplit[0] && newTimeSplit[1] <= timeSplit[1])) {
                return true;
            }
        }
        return false;
    }


    var business_time = `{$info.business_range_time}` ? JSON.parse('{$info.business_range_time}') : [];
    renderBusiness();
    $('.add_business_time').click(function () {
        var new_business_time = $('.business_time').val();

        if(new_business_time == '') {
            layer.msg('请选择营业时间段');
            return;
        }

        if (business_time.length == 0) {
            business_time.push(new_business_time)
            business_time.sort();
            renderBusiness()
        } else {
            if (isTimeOverlap(business_time, new_business_time)) {
                // 时间段交叉
                layer.msg('时间段交叉，请选择其他时间段');
            } else {
                business_time.push(new_business_time);
                business_time.sort();
                renderBusiness()
            }
        }
    })

    $(document).on('click', '.del_business_time', function (){
        var index = $(this).data('index');
        business_time.splice(index, 1);
        renderBusiness();
    })

    function renderBusiness() {
        var html = '';
        if(business_time.length > 0){
            business_time.forEach((val, index) => {
                html += `<div class="form-group row"><label class="col-sm-1 col-form-label"></label>
                                    <div class="col-sm-2">
                                        <input type="text" value="${val}" class="form-control form-control-lg" readonly>
                                    </div>
                                    <div class="col-sm-1">
                                        <button type="button" class="btn btn-primary btn-lg del_business_time" data-index="${index}">删除</button>
                                    </div>
                                </div>`;
            })
        }
        $('#business').html(html);
        $('.business_range_time').val(JSON.stringify(business_time))
    }

    var booking_time = `{$info.booking_range_time}` ? JSON.parse('{$info.booking_range_time}') : [];
    renderBooking();
    $('.add_booking_time').click(function () {
        var new_booking_time = $('.booking_time').val();

        if(new_booking_time == '') {
            layer.msg('请选择预约用餐时间段');
            return;
        }

        if (booking_time.length == 0) {
            booking_time.push(new_booking_time)
            booking_time.sort();
            renderBooking()
        } else {
            if (isTimeOverlap(booking_time, new_booking_time)) {
                // 时间段交叉
                layer.msg('时间段交叉，请选择其他时间段');
            } else {
                booking_time.push(new_booking_time);
                booking_time.sort();
                renderBooking()
            }
        }
    })

    $(document).on('click', '.del_booking_time', function (){
        var index = $(this).data('index');
        booking_time.splice(index, 1);
        renderBooking();
    })

    function renderBooking() {
        var html = '';
        if(booking_time.length > 0){
            booking_time.forEach((val, index) => {
                html += `<div class="form-group row"><label class="col-sm-1 col-form-label"></label>
                                    <div class="col-sm-2">
                                        <input type="text" value="${val}" class="form-control form-control-lg" readonly>
                                    </div>
                                    <div class="col-sm-1">
                                        <button type="button" class="btn btn-primary btn-lg del_booking_time" data-index="${index}">删除</button>
                                    </div>
                                </div>`;
            })
        }
        $('#booking').html(html);
        $('.booking_range_time').val(JSON.stringify(booking_time))
    }

    window.addEventListener('message', function (event) {
        if (event.data) {
            var {lat, lng} = event.data.latlng;
            var {poiaddress, poiname} = event.data;
            $('.lat').val(lat)
            $('.lng').val(lng)
            $('.address').val(poiaddress + poiname)
        }
    }, false);


    $('.ajax-post-printer').click(function () {
        //加载层
        var index = layer.load(2, {shade: [0.2, '#000']});

        var formData = $('#printer-form').serialize();
        $.post('/index/Printer/addPrinter', formData, function (res) {
            if (res.result == 1) {
                setTimeout(function () {
                    window.location.href = '/admin/index/index'
                }, res.timer)
            } else {
                layer.close(index);
                layer.msg(res.msg);
            }
        }, 'json');

        setTimeout(function () {
            layer.close(index);
        }, 3000)
        return false;
    });

    // 删除打印机
    $('.del-printer').click(function () {
        var printer_sn = $(this).data('sn');
        swal({
            title: "您确认要执行该操作吗？",
            type: "warning",
            cancelButtonText: '取消',
            showCancelButton: true,
            confirmButtonColor: "#1BBF80",
            confirmButtonText: "确认",
            closeOnConfirm: false
        }, function () {
            // 加载层
            var index = layer.load(2, {shade: [0.2, '#000']});

            $.get('/index/Printer/delPrinter/printer_sn/' + printer_sn, function (res) {
                if (res.result == 1) {
                    setTimeout(function () {
                        window.location.href = '/admin/index/index';
                    }, res.timer)
                } else if (res.result == 2) {
                    layer.close(index);
                    layer.msg(res.msg);
                }
            }, 'json');

            setTimeout(function () {
                layer.close(index);
            }, 3000)
        });
        return false;
    })

</script>{/block}
